<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <title>4th page</title>

  <link rel="stylesheet" href="../css/blog.css" />
  <link rel="stylesheet" href="../css/loader-ellips.css" />

</head>
<body>

<div class="site-header">
  <div class="container">

    <h1>Blog page 4</h1>

  </div>
</div>

<div class="container">
<div class="posts-container">
<article class="post">
  <a class="post-header" href="/blog/fetchy-shiba-logo">
    <h1 class="post-header__title">Fetchy Shiba logo comin' to get ya</h1>
    <p class="post-header__date">18 Aug 2016</p>
  </a>
  <div class="post__content">
<p><img src="https://i.imgur.com/zwxfN0H.png" alt="Fetchy logos"></p>
<p><a href="https://fetchy.io">Fetchy</a> takes YouTube videos and converts them to downloadable videos and audio files. Thank heavens. Pulling out videos to make clips and gifs has been difficult for too long. Fetchy is a great service that I consistently need. I was pumped to be tasked with designing its logo.</p>
<p>I kicked off the concepts with dogs, lots of dogs. Why over think it? I sketched out a variety of breeds, actions, and styles. I tried using the most meme-able breeds: corgis and pugs. To mix things up, I sketched a couple &quot;f bird&quot; concepts and more straight-forward monogram letters.</p>
<p>Look at that winged puppy. Too bad he didn&#39;t get used. Fly high, little guy.</p>

  </div>
</article>
<article class="post">
  <a class="post-header" href="/blog/codepen-showcase-round-1">
    <h1 class="post-header__title">CodePen showcase: Round 1</h1>
    <p class="post-header__date">9 Aug 2016</p>
  </a>
  <div class="post__content">
<p>Metafizzy&#39;s libraries have hundreds of CodePen demos. One for every feature, option, and behavior. But these demos are simplified examples. They don&#39;t do a good job of showing off what they&#39;re capable of.  So I reached out to the true code artists of CodePen to see how they could make Isotope, Flickity, and Packery shine in the spotlight. Give &#39;em the old razzle-dazzle.</p>
<p>I&#39;ll be collecting these in the <a href="https://codepen.io/collection/AVjkpG/">Metafizzy showcase CodePen collection</a>, as well as individual collections for each library.</p>
<ul>
<li><a href="https://codepen.io/collection/DgkGmy">Isotope showcase</a></li>
<li><a href="https://codepen.io/collection/AYWzeJ">Flickity showcase</a></li>
<li><a href="https://codepen.io/collection/DRRLpZ/">Packery showcase</a></li>
</ul>
<p><a href="https://codepen.io/Kseso">Kseso</a> makes the most of Flickity and CSS, using <code>is-selected</code> classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="oLyqGg" data-default-tab="result" data-user="Kseso" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/Kseso/pen/oLyqGg/">Playing with Flickity</a> by Kseso (<a href="https://codepen.io/Kseso">@Kseso</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="https://codepen.io/jshawl">Jesse Shawl</a> made a slide puzzle with Packery. I can&#39;t believe this actually works!</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="ZORWxv" data-default-tab="result" data-user="jshawl" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/jshawl/pen/ZORWxv/">Order the tiles</a> by Jesse Shawl (<a href="https://codepen.io/jshawl">@jshawl</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="https://codepen.io/pixelass">Gregor Adams</a> took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="wWxPqg" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/pixelass/pen/wWxPqg/">Pack(ev)ery thing</a> by Gregor Adams (<a href="https://codepen.io/pixelass">@pixelass</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>But he didn&#39;t stop there. Gregor made another Packery demo, this time using simpler rectangles. Check out how it works when you resize it.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="zBLrRr" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/pixelass/pen/zBLrRr/">Packery hackery</a> by Gregor Adams (<a href="https://codepen.io/pixelass">@pixelass</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>Perhaps the best use of Isotope ever, <a href="https://codepen.io/acjdesigns">Antoinette Janus</a> makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="GqXgAE" data-default-tab="result" data-user="acjdesigns" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/acjdesigns/pen/GqXgAE/">Steven Universe x Isotope [Sponsored]</a> by Antoinette Janus (<a href="https://codepen.io/acjdesigns">@acjdesigns</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="https://codepen.io/bennettfeely">Bennett Feely</a> makes a 3D, hovering Packery layout. It&#39;s melting my mind how this works.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="JKBJbx" data-default-tab="result" data-user="bennettfeely" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/bennettfeely/pen/JKBJbx/">Packery layout with 3D blocks</a> by Bennett Feely (<a href="https://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p><a href="https://codepen.io/katydecorah">Katy DeCorah</a> brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.</p>
<p data-height="400" data-theme-id="dark" data-slug-hash="qNygjp" data-default-tab="result" data-user="katydecorah" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/katydecorah/pen/qNygjp/">Geo scope</a> by Katy DeCorah (<a href="https://codepen.io/katydecorah">@katydecorah</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<p>It&#39;s a delight to see what creative coders can come up with.</p>
<p>We have some more artists lined up so stay tuned for Round 2!</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

  </div>
</article>


  <nav class="pagination">
      <a class="pagination__previous" href="/blog/page3">Previous &middot; 3</a>
    <span class="pagination__current">Page 4 of 17</span>
      <a class="pagination__next" href="5.html">Next &middot; 5</a>
  </nav>
</div>
</div>

<footer class="site-footer">
  <div class="container">
    <p class="site-footer__fizzy-makes">Metafizzy makes delightful UI libraries and logos</p>
  </div>
</footer>

<script src="../../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../../js/core.js"></script>
<script src="../../js/scroll-watch.js"></script>
<script src="../../js/page-load.js"></script>
<script src="../../js/history.js"></script>
<script src="../js/scroll-loader.js"></script>

</body>
</html>
